@mixin md-icon-on-buttons ($state, $type) {
  .md-icon-font {
    @include md-theme-property(color, $state, $type);
  }

  .md-icon-image {
    @include md-theme-property(fill, $state, $type);
  }
}

.md-button {
  @include md-theme-component() {
    @include md-theme-property(color, text-primary, background);

    &.md-primary {
      @include md-theme-property(color, primary, background);
      @include md-icon-on-buttons(primary, background);
    }

    &.md-accent {
      @include md-theme-property(color, accent, background);
      @include md-icon-on-buttons(accent, background);
    }

    &.md-raised {
      &[disabled] {
        @include md-theme-property(background-color, disabled-background, background);
        @include md-theme-property(color, disabled);
      }

      &:not([disabled]) {
        @include md-theme-property(background-color, background);
        @include md-theme-property(color, text-primary, background);

        &.md-primary {
          @include md-theme-property(color, text-primary, primary);
          @include md-theme-property(background-color, primary);
          @include md-icon-on-buttons(text-primary, primary);
        }

        &.md-accent {
          @include md-theme-property(color, text-primary, accent);
          @include md-theme-property(background-color, accent);
          @include md-icon-on-buttons(text-primary, accent);
        }
      }
    }

    &.md-fab {
      &[disabled] {
        @include md-theme-property(background-color, disabled-background, background);
      }

      &:not([disabled]) {
        @include md-theme-property(background-color, accent);
        @include md-icon-on-buttons(text-primary, accent);

        &.md-primary {
          @include md-theme-property(background-color, primary);
          @include md-icon-on-buttons(text-primary, primary);
        }
      }
    }

    &[disabled] {
      @include md-theme-property(color, disabled, background);
      @include md-icon-on-buttons(icon-disabled, background);
    }
  }
}
